<template>
    <view>
        <a-row :gutter="20">
            <!--文件分类-->
            <a-col :span="4" :xs="4">
                <FileSelectTree @confirm="typeConfirm" />
            </a-col>
            <!-- 文件列表 -->
            <a-col :span="20" :xs="20">
                <a-form layout="inline" :model="formState" @finish="handleFinish" @finishFailed="handleFinishFailed">
                    <a-form-item>
                        <a-input v-model:value="params.searchKey" placeholder="请输入关键字"></a-input>
                    </a-form-item>
                    <a-form-item><a-button type="primary" @click="getList()">搜索</a-button></a-form-item>
                    <a-form-item><a-button type="default" @click="showModal()">导入</a-button></a-form-item>
                </a-form>
                <a-table :dataSource="fileList" :columns="columns" bordered :pagination="pagination" :loading="loading">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'operation'">
                            <div class="editable-row-operations">
                                <span v-if="editableData[record.id]">
                                    <a-button type="link" @click="save(record.id)">保存 </a-button>
                                    <a-popconfirm title="取消编辑 ?" @confirm="cancel(record.id)">
                                        <a-button type="link">取消</a-button>
                                    </a-popconfirm>
                                </span>
                                <span v-else>
                                    <a-button type="link" @click="edit(record.id)">编辑</a-button>
                                    <a-popconfirm title="确定删除 ?" @confirm="del(record.id)">
                                        <a-button type="link" danger>删除</a-button>
                                    </a-popconfirm>
                                </span>
                            </div>
                        </template>
                    </template>
                </a-table>
            </a-col>
        </a-row>
    </view>
    <a-modal v-model:visible="visible" title="上传文件" @ok="insert()">
        <a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange" @drop="handleDrop">
            <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">点击或者是拖拽上传文件</p>
        </a-upload-dragger>
    </a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import userStore from "@/store/modules/user";
import { queryList, updateOne, deleteOne, createOne } from "../../api/file_list"
import { getDirFiles} from '../../api/dir'
import FileSelectTree from './FileSelectTree'
import axios from 'axios';
import useApp from '@/hooks'
const { $ } = useApp()

const params = ref({
    fileTypeId: undefined,
    order: "DESC",
    pageNum: 1,
    pageSize: 99,
    searchKey: undefined
})
const fileList = ref([]);
const visible = ref(false);
const formState = reactive({
    createUserId: "",
    fileName: "",
    fileType: "",
    createdTime: "",
    status: "",
})
const columns = ref([
    {
        title: '文件名称',
        dataIndex: 'fileName',
        sorter: true,
        width: '35%',
    },
    {
        title: '文件类型',
        dataIndex: 'fileType',
        width: '15%',
    },
    {
        title: '文件状态',
        dataIndex: 'status',
    },
    {
        title: '上传时间',
        dataIndex: 'createdTime',
        sorter: true,
    },
    {
        title: '操作',
        dataIndex: 'operation',
        width: '20%'
    }
])
const editableData = reactive({});
const edit = key => {
    editableData[key] = cloneDeep(fileList.value.filter(item => key === item.id)[0]);
};
const showModal = () => {
    visible.value = true
}
const save = key => {
    updateOne(editableData[key]).then(res => {
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
};
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
}
const cancel = key => {
    delete editableData[key];
};

// const queryData = params => {
//     return axios.get('https://randomuser.me/api?noinfo', {
//         params,
//     });
// };
// const isAdmin = ref(userStore().isAdmin);
// const { proxy } = getCurrentInstance();
const emit = defineEmits(["delete", "edit"]);
const props = defineProps({
    loading: {
        type: Boolean,
    },
    tableData: {
        type: Array,
    },
});
// const sys_normal_disable = ref([
//     {
//         value: 1,
//         label: "启用",
//     },
//     {
//         value: 0,
//         label: "未启用",
//     },
// ]);

const handleChange = info => {
    if (info.file.status !== 'uploading') {
        console.log('info.file----', info.file);
        console.log('info.fileList----', info.fileList);
    }
    if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
    } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败.`);
    }
};

// 点击确认
function typeConfirm(e) {
    params.value.fileTypeId = e
    // console.log('params.value.fileTypeId--',params.value.fileTypeId);
    getDirFiles(e).then(res=>{
        console.log('fileTypeId--',res)
        fileList.value = res
    })
    //getList()
}

const insert = info => {
    createOne(formState).then(res => {
        console.log(res)
        visible.value = false
        getList()
    })
};
function getList() {
    queryList(params.value).then(res => {
        console.log('getList---', res)
        fileList.value = res.content
    })
}

getList()

</script>